//登录页1
<script setup lang="ts">
import { ref } from 'vue'
// 模拟登录状态
// 正则表达式：邮箱包含数字
const email = ref('')
const password = ref('')
const isChecked = ref(false)
const toggleCheckbox = () => {
  isChecked.value = !isChecked.value;
};
const login = () => {
  if (!email.value || !password.value) {
    uni.showToast({
      title: '请输入邮箱号和密码',
      icon: 'none',
      duration: 2000,
    })
    return
  }
  const correctEmail = '123'
  const correctPassword = '123'
  if (email.value === correctEmail && password.value === correctPassword) {
    if (isChecked.value === false) {
      uni.showToast({
        title: '请先勾选已阅读协议',
        icon: 'none',
        duration: 2000,
      })
    }
    if (isChecked.value === true) {
      uni.showToast({
        title: '登录成功',
        icon: 'success',
        duration: 2000,
      });
      // 模拟登录成功后的跳转
      setTimeout(() => {
        uni.navigateTo({
          url: '/pages/my/my',
        });
      }, 1000);
    }

  } else {
    uni.showToast({
      title: '邮箱或密码错误',
      icon: 'none',
      duration: 2000,
    });
  }
};
// 注册成功状态
const Register = () => {
  uni.navigateTo({
    url: '/pages/register/register',
  })
}
const Reset = () => {
  uni.navigateTo({
    url: '/pages/reset/reset',
  })
}
</script>
<template>
  <view class="mask" catchtouchmove="true">
    <view class="top">
      <view class="navbar">
        <img class="login-img" src="@/static/images/login_img_illustration@2x.png">
        <!-- <image v-else :src="imageSrc" mode="scaleToFill" class="imgss" /> -->
      </view>
      <view class="bottom">
        <view class="input-box">
          <view class="input-box-top">
            <input class=" input top-input" v-model="email" type="text" placeholder="请输邮箱号">
          </view>
          <view class="input-box-bottom">
            <view class="box">
              <input class=" input bottom-input" v-model="password" placeholder="请输密码">
              <img class="login-icon" src="@/static/images/眼睛动态组件_login_icon_eye_def@2x.png" alt="">
            </view>
          </view>
        </view>
        <view class="text">
          <view class="text-left" @click="Register">注册</view>
          <view class="text-right" @click="Reset">忘记密码</view>
        </view>
        <view class="login-button" @click="login">立即登录</view>
        <view class="agreement" @click="toggleCheckbox">
          <checkbox class="interestthreecheckbox" :checked="isChecked" />
        </view>
        <view class="agreement-text">已阅读协议<span class="xy">《协议链接》</span></view>
      </view>
    </view>
  </view>
</template>
<style lang="scss">
.mask {

  // position: relative;
  .top {
    .navbar {
      width: 750rpx;
      height: 588rpx;
      background: #f2bb16;

      .login-img {
        margin: 90rpx 54rpx;
        width: 628rpx;
        height: 378rpx;
      }
    }

    .bottom {
      position: absolute;
      top: 542rpx;
      width: 750rpx;
      height: 934rpx;
      background: #fff;
      border-radius: 40rpx 40rpx 0rpx 0rpx;

      .input-box {
        position: relative;

        .input-box-top {
          position: absolute;
          top: 172rpx;
          left: 100rpx;
        }

        .input-box-bottom {
          display: flex;
          // flex-direction: row;
          position: absolute;
          // align-items: center;
          top: 280rpx;
          left: 100rpx;
          width: 100%;

          // .bottom-input {
          //   width: 540rpx;
          //   height: 70rpx;
          // }
          .box {
            display: flex;
            position: relative;
            flex-direction: row;
            align-items: center;
          }

          .login-icon {
            position: absolute;
            width: 48rpx;
            height: 48rpx;
            margin-left: 466rpx;
          }

        }

        .input {
          width: 540rpx;
          height: 70rpx;
          background: #fffdfd;
          border: 1px solid #c0bfbf;
          border-radius: 20rpx;
          font-size: 26rpx;
          font-weight: 400;
          box-sizing: border-box;
          text-indent: 10rpx;
          padding-left: 10rpx;

          &::placeholder {
            color: #bbbaba;
          }

          line-height: 32rpx;
        }

      }
    }
  }

  .text {
    width: 100%;

    .text-left {
      display: inline-block;
      margin-top: 412rpx;
      margin-left: 50rpx;
      width: 198rpx;
      height: 30rpx;
      font-size: 26rpx;
      font-weight: 400;
      text-align: CENTER;
      color: #326a94;
      line-height: 32rpx;
    }

    .text-right {
      display: inline-block;
      margin-left: 230rpx;
      width: 198rpx;
      height: 30rpx;

      font-size: 26rpx;
      font-weight: 400;
      text-align: CENTER;
      color: #326a94;
      line-height: 32rpx;
    }
  }

  .login-button {
    margin-top: 94rpx;
    margin-left: 164rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 410rpx;
    height: 70rpx;
    background: #f2bb16;
    border-radius: 40rpx;
  }

  .agreement {
    display: inline-block;
    align-items: center;
    justify-content: center;

    .interestthreecheckbox .wx-checkbox-input {
      margin-left: 208rpx;
      border-radius: 50%;
      width: 28rpx;
      height: 28rpx;
    }
  }

  .agreement-text {
    display: inline-block;
    align-items: center;
    justify-content: center;
    margin-left: 20rpx;
    margin-top: 54rpx;
    width: 286rpx;
    height: 32rpx;
    font-size: 26rpx;
    // font-family: Inter, Inter-400;
    font-weight: 400;
    text-align: center;
    color: #000000;
    line-height: 30rpx;

    .xy {
      color: #326A94;
    }
  }
}
</style>
